/* FontAwesome for working BootSnippet :> */

@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
#team {
    background: #fff !important;
}

@media screen and (min-width: 850px) and (pointer: fine) {
  .btn-primary:hover,
  .btn-primary:focus {
      background-color: #108d6f;
      border-color: #108d6f;
      box-shadow: none;
      outline: none;
  }

  .btn-primary {
      color: #fff;
      background-color: #007b5e;
      border-color: #007b5e;
  }

  section {
      padding: 60px 0;
  }

  section .section-title {
      text-align: center;
      color: #007b5e;
      margin-bottom: 50px;
      text-transform: uppercase;
  }

  #team .card {
      border: none;
      background: #ffffff;
      -webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
      -moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
      box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
  }

  .image-flip{

    background-color: #009cac ;
  }

  .image-flip:hover .backside{
      -webkit-transform: rotateY(0deg);
      -moz-transform: rotateY(0deg);
      -o-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      transform: rotateY(0deg);
      /*border-radius: .25rem;*/
  }

  .flip-0{
      -webkit-transform: rotateY(0deg);
      -moz-transform: rotateY(0deg);
      -o-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      transform: rotateY(0deg);
  }

  .image-flip:hover .frontside{
      -webkit-transform: rotateY(180deg);
      -moz-transform: rotateY(180deg);
      -o-transform: rotateY(180deg);
      transform: rotateY(180deg);
  }

  .flip-180{
      -webkit-transform: rotateY(180deg);
      -moz-transform: rotateY(180deg);
      -o-transform: rotateY(180deg);
      transform: rotateY(180deg);
  }

  .mainflip {
      -webkit-transition: 1s;
      -webkit-transform-style: preserve-3d;
      -ms-transition: 1s;
      -moz-transition: 1s;
      -moz-transform: perspective(1000px);
      -moz-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
      transition: 1s;
      transform-style: preserve-3d;
      position: relative;
  }

  .frontside {
      position: relative;
      -webkit-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      z-index: 2;
      margin-bottom: 30px;
  }

  .backside {
      position: absolute;
      top: 0;
      left: 0;
      background: white;
      -webkit-transform: rotateY(-180deg);
      -moz-transform: rotateY(-180deg);
      -o-transform: rotateY(-180deg);
      -ms-transform: rotateY(-180deg);
      transform: rotateY(-180deg);
      -webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
      -moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
      box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
      font-size: 14px;
      z-index: 99;
  }


  .frontside,
  .backside {
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
      backface-visibility: hidden;
      -webkit-transition: 1s;
      -webkit-transform-style: preserve-3d;
      -moz-transition: 1s;
      -moz-transform-style: preserve-3d;
      -o-transition: 1s;
      -o-transform-style: preserve-3d;
      -ms-transition: 1s;
      -ms-transform-style: preserve-3d;
      transition: 1s;
      transform-style: preserve-3d;
  }

  .frontside .card,
  .backside .card {
      min-height: 312px;
  }

  .backside .card a {
      font-size: 18px;
      color: #007b5e !important;
  }

  .frontside .card .card-title,
  .backside .card .card-title {
      color: #007b5e !important;
  }

  .frontside .card .card-body img {
      width: 120px;
      height: 120px;
    /*border-radius: 50%;*/
  }
}


/* smartphones, touchscreens */
@media (hover: none) and (pointer: coarse) {
  .btn{
    display: none;
  }
  .card-title{
    display:none;
  }
  .list-inline{
    display: none;
  }
  .image-flip{
    margin-bottom: 5em;
  }
}
/* stylus-based screens */
@media (hover: none) and (pointer: fine) {
  .btn{
    display: none;
  }
  .card-title{
    display:none;
  }
  .list-inline{
    display: none;
  }
  .image-flip{
    margin-bottom: 5em;
  }
}